import { Button, Space } from "antd";
import SearchForm from "./components/SearchForm";
import UserInfoTable from "./components/UserInfoTable";
import { useEffect, useState } from "react";
import { User } from "../../Types/User";
import { PlusCircleOutlined } from "@ant-design/icons";
import { UserEditFormDialog } from "./components/UserEditFormDialog";
import { getUsers, removeUser } from "../../api/sysUser";
export default function SysteamUserManage() {
    const [usersList, setUsersList] = useState<User[]>([]);
    const [total, setTotal] = useState(0);

    const [searchParams, setSearchParams] = useState<User>();
    const [pagination, setPagination] = useState({
        pageNum: 1,
        pageSize: 100,
    });

    function queryData(
        pagination: { pageNum: number; pageSize: number },
        searchParams?: User
    ) {
        // 调用接口获取数据
        getUsers({
            ...searchParams,
            ...pagination,
        }).then((res) => {
            setUsersList(res.data.list);
            setTotal(res.data.total);
        });
    }

    function onSearch(params: User) {
        queryData(
            {
                ...pagination,
                pageNum: 1,
            },
            params
        );

        setSearchParams(params);
        setPagination({
            ...pagination,
            pageNum: 1,
        });
    }

    function onReset() {
        setSearchParams(undefined);
        queryData({
            ...pagination,
            pageNum: 1,
        });
        setPagination({
            ...pagination,
            pageNum: 1,
        });
    }

    function onChangePage(page: number, pageSize: number) {
        queryData(
            {
                ...pagination,
                pageNum: page,
                pageSize: pageSize,
            },
            searchParams
        );
        setPagination({
            ...pagination,
            pageNum: page,
            pageSize: pageSize,
        });
    }

    useEffect(() => {
        queryData(pagination);
    }, [pagination]);

    const [userEditFormDialogOpen, setUserEditFormDialogOpen] =
        useState<boolean>(false);
    const [userEditFormDialogTitle, setUserEditFormDialogTitle] = useState<
        "新建用户" | "编辑用户"
    >("新建用户");
    const [userEditFormDialogDetail, setUserEditFormDialogDetail] = useState<
        User | undefined
    >();

    function onClickCreate() {
        setUserEditFormDialogDetail(undefined);
        setUserEditFormDialogOpen(true);
        setUserEditFormDialogTitle("新建用户");
    }
    function onOkUserEditFormDialog() {
        setUserEditFormDialogOpen(false);
        queryData({ ...pagination });
    }

    function onclickEdit(row: User) {
        setUserEditFormDialogDetail(row);
        setUserEditFormDialogOpen(true);
        setUserEditFormDialogTitle("编辑用户");
    }

    function onClickRemove(row: User) {
        removeUser([row.id]).then(() => {
            queryData({ ...pagination, pageNum: 1 });
        });
    }
    return (
        <div>
            <Space direction="vertical" style={{ width: "100%" }}>
                <Space
                    align="end"
                    style={{
                        width: "100%",
                        justifyContent: "space-between",
                        padding: "0 24px",
                    }}
                >
                    <div className="breadcrumb_container">
                        <div className="page-name_container">
                            <div className="page-name">用户管理</div>
                        </div>
                        {/* <Divider
                            type="vertical"
                            style={{ height: "28px", borderWidth: "2px" }}
                        ></Divider> */}
                    </div>

                    <Button type="primary" onClick={onClickCreate}>
                        <PlusCircleOutlined></PlusCircleOutlined>
                        新增
                    </Button>
                </Space>

                <SearchForm onSearch={onSearch} onReset={onReset}></SearchForm>

                <UserInfoTable
                    dataSource={usersList}
                    total={total}
                    pageSize={pagination.pageSize}
                    onChangePage={onChangePage}
                    onClickEdit={onclickEdit}
                    onClickRemove={onClickRemove}
                ></UserInfoTable>
            </Space>
            <UserEditFormDialog
                title={userEditFormDialogTitle}
                open={userEditFormDialogOpen}
                onCancel={() => {
                    setUserEditFormDialogOpen(false);
                }}
                onOk={onOkUserEditFormDialog}
                detail={userEditFormDialogDetail}
            ></UserEditFormDialog>
        </div>
    );
}
